


interface MenuItem {
  key: string;
  icon: React.ReactNode | string;
  label: string;

  children?: MenuItem[]; // 将 subMenuItems 改为 children
}

// import { useHistory } from 'react-router-dom';
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';

import logo from '../assets/images/logo.png';  
import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,

  VideoCameraOutlined,

} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
const { Header, Sider, Content } = Layout;

const menuItems: MenuItem[] = [
  {
    key: '/dashboard',
    icon: <VideoCameraOutlined />,
    label: '商品管理',

    children: [
      {
        key: '/dashboard/dashboards',
        icon: <VideoCameraOutlined />,
        label: '商品列表',
      },
      // {
      //   key: '/dashboard/bears',
      //   icon: <UploadOutlined />,
      //   label: '子菜单项2',

      // },
    ],
  },

  {
    key: '/order',
    icon: <VideoCameraOutlined />,
    label: '订单管理',

    children: [
      {
        key: '/order/list',
        icon: <VideoCameraOutlined />,
        label: '订单列表',
      },
  
    ],
  },

  {
    key: '/user',
    icon: <VideoCameraOutlined />,
    label: '用户管理',

    children: [
      {
        key: '/user/list',
        icon: <VideoCameraOutlined />,
        label: '用户列表',
      },
  
    ],
  },

  {
    key: '/notice/list',
    icon: <VideoCameraOutlined />,
    label: '消息列表',

    // children: [
    //   {
    //     key: '/user/list',
    //     icon: <VideoCameraOutlined />,
    //     label: '用户列表',
    //   },
  
    // ],
  },
  {
    key: '/trial/list',
    icon: <VideoCameraOutlined />,
    label: '试用中心',

    // children: [
    //   {
    //     key: '/user/list',
    //     icon: <VideoCameraOutlined />,
    //     label: '用户列表',
    //   },
  
    // ],
  },
  // 可以继续添加更多的项
];
type OnSelectFunction = (params: { key: string }) => void;
export const DashboardLayout: React.FC = () => {

  const location = useLocation();

  // 根据当前路径设置默认选中的菜单项
  const defaultSelectedKeys = [location.pathname];

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate = useNavigate()
  const onSelect: OnSelectFunction = ({ key }) => {
    navigate(key)
  }
  // const history = useHistory();

  // const handleNav3Click = () => {
  //   // 在这里进行路由跳转
  //   history.push('/your-target-route');
  // };
  return (
    <div className=" w-full h-screen" >
      <Layout style={{ height: '100%' }}   >
        <Sider trigger={null} collapsible collapsed={collapsed}>
        {/* <div className="flex items-center justify-center">
  <img src={logo} alt="Logo" className="w-80 h-40" />
</div> */}

          <Menu theme="dark" mode="inline" onSelect={onSelect} defaultSelectedKeys={defaultSelectedKeys}items={menuItems} />
          {/* <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
   
            {menuItems.map((item) =>
        item.children ? (
          <Menu.SubMenu key={item.key} icon={item.icon} title={item.label}>
            {item.children.map((subItem) => (
              <Menu.Item key={subItem.key} icon={subItem.icon}>
                <NavLink to={subItem.to}>{subItem.label}</NavLink>
              </Menu.Item>
            ))}
          </Menu.SubMenu>
        ) : (
          <Menu.Item key={item.key} icon={item.icon}>
            {item.label}
          </Menu.Item>
        )
      )}
          </Menu>  */}
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>

  );
};

